<script setup lang="ts">
import { CourseTab } from '@/models/sys'
import historyMessageHooks from '@/hooks/historyMessageHooks'
import CourseListView from '@/pages/history/components/courseListView.vue'

const tabs = ref([])
const tabPosition = ref(CourseTab.OnlineSchool)
const { studentCoursesNumModel, ...callback } = historyMessageHooks()
const props = defineProps<{
  studentId: number
}>()

watch(
  () => props.studentId,
  (val) => {
    if (props.studentId !== undefined) {
      getStudentCoursesNum()
    }
  },
)

function switchTab(index: number) {
  if (index !== tabPosition.value) {
    tabPosition.value = index
  }
}

function getStudentCoursesNum() {
  callback.studentCoursesNum(props.studentId, () => {
    tabs.value = [
      `网校(${studentCoursesNumModel.value.online_num})`,
      `学校(${studentCoursesNumModel.value.offline_num})`,
      `书店(${studentCoursesNumModel.value.bookstore_num})`,
    ]
  })
}
</script>

<template>
  <view>
    <view class="tabs tabs-head">
      <template v-for="(item, index) in tabs" :key="index">
        <view
          class="tab-view"
          :style="{
            width: `${100 / tabs.length}%`,
          }"
          :class="index === tabPosition ? 'text-primary' : ''"
          @click="switchTab(index)"
        >
          {{ item }}
        </view>
        <view class="line" v-if="tabs.length - 1 !== index"></view>
      </template>
    </view>

    <view v-show="CourseTab.OnlineSchool == tabPosition">
      <CourseListView
        :studentId="studentId"
        :type="CourseTab.OnlineSchool"
        :tabPosition="tabPosition"
      ></CourseListView>
    </view>

    <view v-show="CourseTab.School == tabPosition">
      <CourseListView
        :type="CourseTab.School"
        :tabPosition="tabPosition"
        :studentId="studentId"
      ></CourseListView>
    </view>
    <view v-show="CourseTab.Bookstore == tabPosition">
      <CourseListView
        :type="CourseTab.Bookstore"
        :tabPosition="tabPosition"
        :studentId="studentId"
      ></CourseListView>
    </view>
  </view>
</template>

<style scoped lang="scss">
.tabs-head {
  position: relative;
  display: flex;
  align-items: center;
  height: 88rpx;
  margin-top: 24rpx;
  margin-bottom: 5rpx;
  background: #ffffff;
  border-radius: 16rpx;
  box-shadow: 0rpx 4rpx 16rpx 0rpx rgba(183, 189, 200, 0.1);

  .tab-view {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 33vw;
    height: 100%;
    font-family:
      PingFangSC,
      PingFang SC;
    font-size: 28rpx;
    font-weight: 400;
    color: #8a909c;
  }

  .line {
    width: 2rpx;
    height: 40rpx;
    background: #ebedf2;
  }
}

.check-icon {
  width: 40rpx;
  height: 40rpx;
  background: url('@/static/images/history/check-icon.png') no-repeat;
  background-size: 100% 100%;
}

.not-check-icon {
  width: 40rpx;
  height: 40rpx;
  background: url('@/static/images/index/not-check-icon.png') no-repeat;
  background-size: 100% 100%;
}

.linear-hor {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.round-corners-gray {
  background: #f8f9fb;
  border-radius: 16rpx;
}

.round-corners {
  background: white;
  border-radius: 16rpx;
}

.divider {
  width: calc(100% - 64rpx);
  height: 2rpx;
  margin: 0 32rpx 32rpx 32rpx;
  background: #ebedf2;
}

.spacer {
  flex-grow: 1;
}

.linear-vertical {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.text-primary {
  font-family:
    PingFangSC,
    PingFang SC;
  font-size: 28rpx !important;
  font-weight: 800 !important;
  color: #2b2f36 !important;
}

.scroll-views {
  height: calc(100vh - 578rpx);
}

@mixin flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40rpx;
  padding: 0 8rpx;
  font-family:
    PingFangSC,
    PingFang SC;
  font-size: 22rpx;
  font-weight: 400;
  color: #2b2f36;
  border-radius: 8rpx;
}

.tag-green {
  @include flex-center;
  background: #eeffe8;
  border: 2rpx solid #87e363;
}

.tag-blue {
  @include flex-center;
  background: #edffff;
  border: 2rpx solid #88dbdd;
}
</style>
